<!-- register -->
<template>
  <div class="container a-container" id="a-container" ref="aContainer">
    <form class="form" id="a-form" method="" action="">
      <h2 class="form_title title">创建账户</h2>
      <div class="form__icons">
        <span class="form__icon iconfont icon-chatgpt"></span>
        <span class="form__icon iconfont icon-github"></span>
        <span class="form__icon iconfont icon-deepseek"></span>
      </div>
      <span class="form__span">请使用邮箱进行注册</span>
      <input
        class="form__input"
        :class="{ 'input-error': emailError }"
        type="text"
        placeholder="邮箱"
        v-model="email"
        @blur="validateEmail"
        @focus="resetEmailError"
      />
      <div class="verification-container">
        <input
          class="form__input verification-input"
          :class="{ 'input-error': verificationCodeError }"
          type="text"
          placeholder="验证码"
          v-model="verificationCode"
          @blur="validateVerificationCode"
          @focus="resetVerificationCodeError"
        />
        <button
          type="button"
          class="verification-button"
          :disabled="isSending"
          @click="sendVerificationCode"
        >
          {{ isSending ? `${countdown}s` : "发送验证码" }}
        </button>
      </div>
      <input
        class="form__input"
        :class="{ 'input-error': passwordError }"
        type="password"
        placeholder="设置密码"
        v-model="password"
        @blur="validatePassword"
        @focus="resetPasswordError"
      />
      <input
        class="form__input"
        :class="{ 'input-error': confirmPasswordError }"
        type="password"
        placeholder="再次输入密码"
        v-model="confirmPassword"
        @blur="validateConfirmPassword"
        @focus="resetConfirmPasswordError"
      />
      <button
        class="form__button button submit"
        type="button"
        @click="register"
      >
        注册
      </button>
    </form>
  </div>
</template>

<script setup lang="js">
import { useAuthFormsStore } from '@/store/authFormsStore';
import { storeToRefs } from 'pinia';
import { watch, ref, onMounted, inject } from 'vue';
import { sendVerificationCodeAPI, registerAndHandleResponse } from '@/api';
import { ElMessage } from 'element-plus';

const authFormsStore = useAuthFormsStore();
const { showSignup } = storeToRefs(authFormsStore);

const email = ref('');
const verificationCode = ref('');
const password = ref('');
const confirmPassword = ref('');
const isSending = ref(false);
const countdown = ref(60);
let timer = null;

const emailError = ref(false);
const verificationCodeError = ref(false);
const passwordError = ref(false);
const confirmPasswordError = ref(false);

const aContainer = ref(null);
const switchButton = inject('switchBtn');

const validateEmail = () => {
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  emailError.value = !emailPattern.test(email.value);
};

const validateVerificationCode = () => {
  verificationCodeError.value = !verificationCode.value;
};

const validatePassword = () => {
  passwordError.value = !password.value || password.value.length < 6;
};

const validateConfirmPassword = () => {
  confirmPasswordError.value = password.value !== confirmPassword.value;
};

const resetEmailError = () => {
  emailError.value = false;
};

const resetVerificationCodeError = () => {
  verificationCodeError.value = false;
};

const resetPasswordError = () => {
  passwordError.value = false;
};

const resetConfirmPasswordError = () => {
  confirmPasswordError.value = false;
};

const sendVerificationCode = async () => {
  validateEmail();
  if (isSending.value || emailError.value || !email.value) {
    ElMessage.warning('请填写正确的邮箱');
    return;
  }

  try {
    await sendVerificationCodeAPI(email.value);
    ElMessage.success('验证码已发送');
    startCountdown();
  } catch (error) {
    console.error('发送验证码失败', error);
    ElMessage.error('发送验证码失败');
  }
};

const startCountdown = () => {
  isSending.value = true;
  countdown.value = 60;
  timer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(timer);
      isSending.value = false;
    }
  }, 1000);
};

const clearInputs = () => {
  email.value = '';
  verificationCode.value = '';
  password.value = '';
  confirmPassword.value = '';
};

const triggerLoginSwitch = () => {
  if (switchButton.value) {
    switchButton.value.click();
  }
};

const register = async () => {
  validateEmail();
  validateVerificationCode();
  validatePassword();
  validateConfirmPassword();

  if (emailError.value || verificationCodeError.value || passwordError.value || confirmPasswordError.value) {
    ElMessage.warning('请正确填写所有字段');
    return;
  }

  if (password.value.length < 6) {
    ElMessage.warning('密码不能小于六位数');
    return;
  }

  if (password.value !== confirmPassword.value) {
    ElMessage.warning('两次输入的密码不一致');
    return;
  }

  await registerAndHandleResponse(email.value, confirmPassword.value, verificationCode.value, clearInputs, triggerLoginSwitch);
};

onMounted(() => {
  watch(showSignup, () => {
    if (aContainer.value) {
      aContainer.value.classList.toggle('is-txl');
    }
  });
});
</script>

<style scoped>
*,
*::after,
*::before {
  box-sizing: border-box;
  user-select: none;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  width: 600px;
  height: 100%;
  padding: 25px;
  background-color: #ffffff;
  transition: 1.25s;
}

.a-container {
  z-index: 100;
  left: calc(100% - 600px);
}

.form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.form__icon {
  object-fit: contain;
  width: 30px;
  margin: 0 5px;
  opacity: 0.5;
  transition: 0.15s;
}

.form__icon:hover {
  opacity: 1;
  transition: 0.15s;
  cursor: pointer;
}

.form__span {
  margin-top: 30px;
  margin-bottom: 12px;
}

.form__input {
  width: 350px;
  height: 40px;
  margin: 4px 0;
  padding-left: 25px;
  font-size: 13px;
  letter-spacing: 0.15px;
  border: none;
  outline: none;
  font-family: "Montserrat", sans-serif;
  background-color: #fefefe;
  transition: 0.25s ease;
  border-radius: 8px;
  box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
}

.form__input:focus {
  box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
}

.form__link {
  color: #181818;
  font-size: 15px;
  margin-top: 25px;
  border-bottom: 1px solid #a0a5a8;
  line-height: 2;
}

.form__button {
  cursor: pointer;
}

.form__button:hover {
  box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9;
  transform: scale(0.985);
  transition: 0.25s;
}

.form__button:active,
.form__button:focus {
  box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #f9f9f9;
  transform: scale(0.97);
  transition: 0.25s;
}

.button {
  width: 180px;
  height: 50px;
  border-radius: 25px;
  margin-top: 50px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.15px;
  background-color: #4b70e2;
  color: #f9f9f9;
  box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
  border: none;
  outline: none;
}

.title {
  font-size: 34px;
  font-weight: 700;
  line-height: 3;
  color: #181818;
}

.is-txl {
  left: 0;
  transition: 1.25s;
  transform-origin: right;
}

.verification-container {
  display: flex;
  align-items: center;
  margin: 4px 0;
  width: 350px;
}

.verification-input {
  flex: 1;
  margin-right: 10px;
}

.verification-button {
  height: 40px;
  width: 100px;
  padding: 0 15px;
  font-size: 13px;
  border: none;
  outline: none;
  background-color: #4b70e2;
  color: #f9f9f9;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 2px 2px 4px #d1d9e6, -2px -2px 4px #f9f9f9;
}

.verification-button:hover {
  box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #f9f9f9;
  transition: 0.25s;
}

.verification-button:active,
.verification-button:focus {
  box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #f9f9f9;
  transform: scale(0.97);
  transition: 0.25s;
}

.verification-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  box-shadow: none;
}

.input-error {
  border: 1px solid red;
}
</style>
